    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>服务器资源监控</title>
        <!-- 引入 ECharts -->
        <script src="/echarts.min.js"></script>
        <style>
            body {
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                margin: 0;
                padding: 20px;
                background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
                min-height: 100vh;
            }
            h1 {
                text-align: center;
                color: #2c3e50;
                margin-bottom: 30px;
                text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
            }
            .chart-container {
                width: 90%;
                height: 400px;
                margin: 30px auto;
                border-radius: 12px;
                background: white;
                box-shadow: 0 10px 30px rgba(0,0,0,0.1);
                padding: 20px;
                transition: transform 0.3s;
            }
            .chart-container:hover {
                transform: translateY(-5px);
            }
            .footer {
                text-align: center;
                margin-top: 50px;
                color: #7f8c8d;
                font-size: 0.9em;
            }
        </style>
    </head>
    <body>

    <h1>📊 服务器资源实时监控</h1>

    <div class="chart-container">
        <div id="cpuChart" style="width: 100%; height: 100%;"></div>
    </div>

    <div class="chart-container">
        <div id="memoryChart" style="width: 100%; height: 100%;"></div>
    </div>

    <div class="chart-container">
        <div id="diskChart" style="width: 100%; height: 100%;"></div>
    </div>

    <div class="footer">
        <p>监控系统 | 更新间隔: 3秒 | Powered by Spring Boot 2.7 + ECharts</p>
    </div>

    <!-- 所有 JavaScript 写在这里 -->
    <script type="text/javascript">
        // 初始化 ECharts 实例
        let cpuChart = echarts.init(document.getElementById('cpuChart'));
        let memoryChart = echarts.init(document.getElementById('memoryChart'));
        let diskChart = echarts.init(document.getElementById('diskChart'));

        // 定义通用的仪表盘配置
        function createGaugeOption(titleText, value, unit = '%') {
            return {
                title: {
                    text: titleText,
                    left: 'center',
                    textStyle: {
                        fontSize: 18,
                        fontWeight: 'bold',
                        color: '#2c3e50'
                    }
                },
                series: [{
                    type: 'gauge',
                    radius: '90%',
                    center: ['50%', '65%'],
                    startAngle: 200,
                    endAngle: -20,
                    progress: {
                        show: true,
                        width: 15
                    },
                    axisLine: {
                        lineStyle: {
                            width: 15,
                            color: [
                                [0.3, '#34c38f'],
                                [0.7, '#f1b44c'],
                                [1, '#f46a6a']
                            ]
                        }
                    },
                    pointer: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    detail: {
                        valueAnimation: true,
                        fontSize: 24,
                        offsetCenter: [0, '60%'],
                        formatter: '{value}' + unit
                    },
                    data: [{
                        value: value,
                        name: titleText
                    }]
                }]
            };
        }

        // 更新图表函数
        function updateCharts() {
            fetch('/api/metrics')
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络错误');
                    }
                    return response.json();
                })
                .then(data => {
                    // 格式化数据为百分比（保留2位小数）
                    const cpuPercent = (data.cpuUsage * 100).toFixed(2);
                    const memoryPercent = (data.memoryUsage * 100).toFixed(2);
                    const diskPercent = (data.diskUsage * 100).toFixed(2);

                    // 更新 CPU 图表
                    cpuChart.setOption(createGaugeOption('CPU 使用率', cpuPercent));

                    // 更新内存图表
                    memoryChart.setOption(createGaugeOption('内存使用率', memoryPercent));

                    // 更新磁盘图表
                    diskChart.setOption(createGaugeOption('磁盘使用率', diskPercent));

                    // 可选：在控制台输出
                    console.log(`[监控数据] CPU: ${cpuPercent}%, 内存: ${memoryPercent}%, 磁盘: ${diskPercent}%`);
                })
                .catch(error => {
                    console.error('获取监控数据失败:', error);
                    alert('无法连接到监控服务，请检查后端是否运行！');
                });
        }

        // 首次加载时获取数据
        updateCharts();

        // 每 3 秒自动刷新一次
        setInterval(updateCharts, 3000);

        // 页面加载完成后设置图表自适应
        window.addEventListener('load', () => {
            [cpuChart, memoryChart, diskChart].forEach(chart => {
                chart.resize();
            });
        });

        // 浏览器窗口大小改变时，图表自适应
        window.addEventListener('resize', () => {
            [cpuChart, memoryChart, diskChart].forEach(chart => {
                chart.resize();
            });
        });
    </script>

    </body>
    </html>